<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./creditCard.css">
</head>

<body>
    <div class="credit-card-searsh-box">
        <div onclick="search()" class="search-box"><input class="search-box-left" type="text" placeholder="请输入"><img
                class="search-img" src="../搜索 (2).png" alt=""><img class="microphone-img" src="../microphone.png"
                alt=""></div>
        <div onclick="service()" class="search-box-right"><img src="../客服.png" alt=""><span>客服</span></div>
    </div>
    <script>
        function search() {
            window.location.href = "../loan-search/search.html"
        }
        function service() {
            window.location.href = "./creditCardService.html"
        }
    </script>
    <div class="login-box">
        <div class="login-box-top">
            <div class="login-box-top1">登录查看更多信息</div>
            <div class="login-box-top2"><span>去登录</span></div>
        </div>
        <div class="login-box-bottom"><span>查看更多信用卡，申请享优惠 ></span></div>
    </div>
    <div class="functionalZone">
        <div class="functionalZone-box"><img src="../余额转出.png" alt=""><span>余额转出</span></div>
        <div class="functionalZone-box"><img src="../额度管理.png" alt=""><span>额度管理</span></div>
        <div class="functionalZone-box"><img src="../我要现金.png" alt=""><span>我要现金</span></div>
        <div class="functionalZone-box"><img src="../分期还款.png" alt=""><span>分期还款</span></div>
        <div class="functionalZone-box"><img src="../积分.png" alt=""><span>积分</span></div>
        <div class="functionalZone-box"><img src="../立即还款.png" alt=""><span>立即还款</span></div>
        <div class="functionalZone-box"><img src="../数字信用卡.png" alt=""><span>数字信用卡</span></div>
        <div class="functionalZone-box"><img src="../信用卡申请.png" alt=""><span>信用卡申请</span></div>
        <div class="functionalZone-box"><img src="../一键绑卡.png" alt=""><span>一键绑卡</span></div>
        <div class="functionalZone-box"><img src="../更多.png" alt=""><span>更多</span></div>
    </div>
    <div class="meCash-big">
        <div class="meCash">
            <div class="meCash-box">
                <span class="meCash-box-span1">我要现金</span>
                <span class="meCash-box-span2">登录后查看可见金额</span>
            </div>
            <div class="meCash-box-img"><img src="../好多钱.png" alt=""></div>
        </div>
    </div>
    <div class="advertising">
        <img id="dot-img" class="advertising-img" src="../好运当头.png" alt="">
        <!-- <img id="dot-img" class="advertising-img" src="../京东联名卡.png" alt="">
        <img id="dot-img" class="advertising-img" src="../境外消费.png" alt="">
        <img id="dot-img" class="advertising-img" src="../推荐办卡.png" alt="">
        <img id="dot-img" class="advertising-img" src="../缤纷生活.png" alt=""> -->
    </div>
    <script>
        var date = 0;
        var dotImg = document.getElementById("dot-img");
        var images = ["../好运当头.png", "../京东联名卡.png", "../境外消费.png", "../推荐办卡.png", "../缤纷生活.png"];
        var time = setInterval(function () {
            date++;
            if (date > images.length - 1) {
                date = 0;
            }
            dotImg.src = images[date];
            // dotImg.style.transition = "all 1s";
            // dotImg.style.transform = "translateX("+-100+"%)";
            // console.log(date);
        }, 3000)
    </script>
    <div class="HotCardWonderful">
        <div class="HotCardWonderful-box">
            <div class="HotCard-span"><span>热卡精彩</span></div>
            <div class="HotCard-div"> > </div>
        </div>
        <div class="HotCardWonderful-product">
            <div class="HotCard-img">
                <img class="HotCard-img1" src="../热门产品.png" alt="">
                <img class="HotCard-img2" src="../新客户.png" alt="">
            </div>
            <div class="HotCard-img-bottom">
                <div class="HotCard-img-top">
                    <img class="HotCard-img3" src="../卓携留学卡.png" alt="">
                    <img class="HotCard-img3" src="../京东联名卡2.png" alt="">
                </div>
                <img class="HotCard-img4" src="../爱驾汽车卡.png" alt="">
            </div>
        </div>
    </div>
    <div class="credit-card-bottom">
        <div class="credit-card-box-bottom">
            <div class="credit-card-bottom-div"><img src="../钻.png" alt=""><span>首页</span></div>
            <div class="credit-card-bottom-div"><img src="../信用卡 (3).png" alt=""><span>信用卡</span></div>
            <div class="credit-card-bottom-div"><img src="../财富.png" alt=""><span>财富</span></div>
            <div class="credit-card-bottom-div"><img src="../生活.png" alt=""><span>生活</span></div>
            <div class="credit-card-bottom-div"><img src="../我的.png" alt=""><span>我的</span></div>
        </div>
    </div>
</body>

</html>